<template>
    <div class="app-container">
        <!-- 导航栏区域 -->
        <div>
            <b-navbar toggleable="lg" type="dark" variant="info">
                <b-navbar-brand to="/">视点</b-navbar-brand>

                <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

                <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav class="ml-auto">
                    <b-nav-form>
                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                    </b-nav-form>
                </b-navbar-nav>
                <b-navbar-nav>
                    <b-nav-item to="/login" v-show="!isLogin">登录</b-nav-item>
                    <div class="userHome" v-show="isLogin">
                        <b-nav-item-dropdown text="User" right>
                            <b-dropdown-item href="#">Account</b-dropdown-item>
                            <b-dropdown-item href="#">Settings</b-dropdown-item>
                        </b-nav-item-dropdown>
                    </div>
                </b-navbar-nav>
                </b-collapse>
            </b-navbar>
        </div>
        <!-- 导航分类区域 -->
        <div>
            <b-nav align="center">
                <b-nav-item to="/home">首页</b-nav-item>
                <b-nav-item to="/tv">电视剧</b-nav-item>
                <b-nav-item to="/variety">综艺</b-nav-item>
                <b-nav-item to="/movie">电影</b-nav-item>
                <b-nav-item to="/rank">排行榜</b-nav-item>
            </b-nav>
        </div>

        <!-- 中间的路由区域 -->
        <router-view></router-view> 

        <!-- 底部footer区域 -->
        <div class="footer">
            <span>Copyright © 2019 视点 All Rights Reserved</span>
        </div>
    </div>
</template>

<script>
export default {
    
    computed: {
        isLogin(){
            if(sessionStorage.getItem("uName")){
                this.$store.commit("userStatus",sessionStorage.getItem("uName"));
            }else{
                this.$store.commit("userStatus",null);
            }
            return this.$store.getters.isLogin;
        }
    },
}
</script>

<style lang="scss" scoped>
a{
    color:#555;
}
.choose-active{
    color:#007bff;
}
.footer{
    margin-top: 1rem;
    width: 100%;
    height: 3rem;
    background-color: #17a2b8;
    color:#fff;
    line-height: 3rem;
    font-size: 0.9rem;
    text-align: center;
}
</style>